<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width" />

  <title>Web Storage API example</title>

  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Bitter|Ubuntu+Mono" rel="stylesheet"
    type="text/css" />
  <link rel="stylesheet" href="style.css" />
  <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
  <div class="wrapper">
    <h1>本地存储</h1>

    <p>
      This example is designed to demonstrate usage of the
      <a href="http://dev.w3.org/html5/webstorage/">W3C Web Storage API</a>. It should work as far
      back as IE8. Choose custom background colours, logos and fonts from the below drop down
      menus, then try closing and reopening the page — you will find that your choices are
      remembered, as they are stored using Web Storage. You can also visit the
      <a href="event.html" target="_blank">storage event output</a> (opens in new tab). Open this,
      change some values in the index page, then look at the events page — you'll see the storage
      changes reported.
    </p>

    <form>
      <div>
        <label for="bgcolor">选择背景颜色:</label>
        <input class="color" id="bgcolor" type="color" />
      </div>
      <div>
        <label for="font">选择字体:</label>
        <select id="font">
          <option value="'Open Sans Condensed', sans-serif" selected>Sans-serif</option>
          <option value="'Bitter', serif">Serif</option>
          <option value="'Ubuntu Mono'">Monospace</option>
        </select>
      </div>
      <div>
        <label for="image">选择图片:</label>
        <select id="image">
          <option value="images/tortoise.png">Tortoise</option>
          <option value="images/firefoxos.png">Firefox</option>
          <option value="images/crocodile.png">Crocodile</option>
        </select>
      </div>
    </form>

    <footer></footer>
    <img src="images/firefoxos.png" />
  </div>
</body>
<script>
  /* 实现功能 */
  function $(selector) {
    return document.querySelector(selector)
  }

  function setConfig() {
    config.bgcolor = bgcolorInput.value
    config.font = fontInput.value
    config.image = imageInput.value

  }
  function render() {
    body.style.backgroundColor = config.bgcolor
    p.style.fontFamily = config.font
    img.src = config.image
    bgcolorInput.value = config.bgcolor
    fontInput.value = config.font
    imageInput.value = config.image
  }
  function handleChange() {
    setConfig()
    render()
    save()
  }
  function save() {
    localStorage.setItem(key, JSON.stringify(config))
  }
  function load() {
    return JSON.parse(localStorage.getItem(key)) || {
      bgcolor: bgcolorInput.value,
      font: fontInput.value,
      image: imageInput.value

    }
  }

  const bgcolorInput = $('#bgcolor')
  const fontInput = $('#font')
  const imageInput = $('#image')
  const body = document.body
  const p = $('.wrapper p')
  const img = $('.wrapper img')

  const key = 'page-setting'
  const config = load() //配置

  bgcolorInput.onchange =
    fontInput.onchange =
    imageInput.onchange =
    handleChange


  render()

  // let color = document.querySelector('#bgcolor')
  // color.onchange = () => {
  //   document.body.style.backgroundColor = color.value
  // }
  // let font = document.querySelector('#font')
  // font.onchange = () => {
  //   let p = document.querySelector('p')
  //   p.style.fontFamily = font.value
  // }
  // let image = document.querySelector('#image')
  // image.onchange = () => {
  //   let img = document.getElementsByTagName('img')[0]
  //   img.src = image.value
  // }
  /* onchange */
</script>

</html>